<template>
  <div class="link-box" title="点击进入训练" @click="toSubjectPage" >
    <div class="title">{{trainingName}}</div>
    <div v-if="status === 2" class="show-info">得分：{{score}}分</div>
    <!--<div v-else class="show-info">进度：0/1</div>-->
    <el-tag v-if="status === 0" type="info">未开始</el-tag>
    <el-tag v-else-if="status === 1" type="warning">进行中</el-tag>
    <el-tag v-else type="success">已完成</el-tag>
  </div>
</template>

<script>
export default {
  name: 'taskBox',
  props: {
    status: {
      default: () => 0, // 0:未开始 ，1: 进行中; 2: 已完成
      type: Number
    },
    score: { // 得分
      default: () => 0,
      type: Number
    },
    stuNodeCaseId: String,
    stuTaskCaseId: String,
    subjectType: Number,
    trainingId: String,
    trainingName: String
  },
  methods: {
    toSubjectPage () {
      this.$router.push({
        name: 'answer',
        query: {
          trainingId: this.trainingId,
          stuMTaskCaseId: this.stuTaskCaseId,
          stuMNodeCaseId: this.stuNodeCaseId,
          subjectType: this.subjectType,
          trainingName: this.trainingName
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .link-box{
    width: 95%;
    cursor: pointer;
    min-height: 60px;
    border-radius: 10px;
    background-color: white;
    margin-top: 20px;
    box-shadow:0px 2px 12px 0px rgba(4,0,0,0.05);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
    .title{
      width: 80%;
      height: 100%;
      font-size: 18px;
      font-weight: 500;
      line-height: 24px;
    }
    .show-info{
      margin-right: 40px;
    }
  }
</style>
